<template>
  <div class="app-container">
    <!-- 标签自动悬浮的输入框 -->
    <div class="common-title mb-20">标签悬浮输入框</div>
    <div class="common-table-wrapper mb-20">
      <div class="custom-input">
        <input class="myInput" placeholder=" " v-model="v1" />
        <label class="myInputLabel">用户名</label>
      </div>
    </div>

    <!-- 流光按钮 -->
    <div class="common-title mb-20">流光按钮</div>
    <div class="common-table-wrapper magic-btn-wrapper mb-20">
      <div class="magic-button">这是一个非主流按钮</div>
    </div>

    <!-- 昼夜切换 -->
    <div class="common-title mb-20">昼夜</div>
    <div class="common-table-wrapper day-and-night-wrapper" :class="check1 === true ? 'bg-night' : 'bg-day'">
      <input type="checkbox" id="checkbox" v-model="check1" />
      <label for="checkbox" class="danLabel">
        <span></span>
      </label>
    </div>

    <!-- 点击有波纹效果的按钮 -->

    <!-- 毛玻璃效果 -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        v1: '',
        check1: false,
      }
    }
  }

</script>

<style lang="scss" scoped>
  $vw_base: 1920;

  @function vw($p) {
    @return ($p/$vw_base) * 100vw;
  }

  @mixin flex {
    display: flex;
    align-items: center;
  }

  $dark: #000;
  $light: #fff;
  $day: #c2e9f6;
  $night: #808fc7;

  .custom-input {
    position: relative;

    // placeholder-shown: 需要placeholder不为空才可以起作用。
    // 顾名思义，指的是在placeholder生效时（无值）生效的样式。
    // 它可以用于检测非空，当输入框中没有值（显示出了placeholder）时，伪类中的代码会生效。
    // 加上not伪类，我们就得到了相反的效果。即输入框有值（不显示placeholder），代码生效。
    .myInput {
      border: 1px solid #ececec;
      outline: none;
      padding: vw(10) vw(15);
      font-size: 16px;
      line-height: 1.5;
      border-radius: 5px;
      transition: .25s ease all;

      // &:not(:placeholder-shown) {
      //   border: 1px solid red
      // }

      // &:placeholder-shown {
      //   border: 1px solid red
      // }
    }

    .myInputLabel {
      position: absolute;
      font-size: 16px;
      line-height: 1.5;
      left: 16px;
      top: 14px;
      color: #a2a9b6;
      padding: 0 2px;
      transform-origin: 0 0;
      pointer-events: none;
      transition: all .25s;
    }

    // 当输入框有值时（输入完毕失焦保持边框颜色） 或者 输入框聚焦时，边框变色
    .myInput:not(:placeholder-shown),
    .myInput:focus {
      border: 1px solid #2486ff;
    }

    // A~B 选择器代表选择了同一个父元素下所有A元素后面的B元素（无需紧跟，可以有其他元素间隔都可以选择到）
    // 输入框有值或者聚焦时，所有输入框子类下拥有同一个父元素（custom-input）的后面的label被选中：变色，缩小，移动到上方
    .myInput:not(:placeholder-shown)~.myInputLabel,
    .myInput:focus~.myInputLabel {
      top: -5px;
      transform: scale(0.75);
      background-color: #fff;
      color: #2486ff;
      // border: 1px solid #2486ff;
    }

  }

  .magic-btn-wrapper {
    background: $dark;
    padding: vw(50);

    @keyframes btnFlow {
      100% {
        background-position: -400%;
      }
    }

    .magic-button {
      @include flex;
      position: relative;
      color: #fff;
      font-weight: bold;
      padding: vw(15) vw(40);
      background-image: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #09a8f4);
      width: fit-content;
      background-size: 400%;
      border-radius: 20px;
      cursor: pointer;
      transition: .5s ease all;
      z-index: 1;
      user-select: none;

      &:hover {
        animation: btnFlow 5s linear infinite;
      }

      &:hover::before {
        animation: btnFlow 5s linear infinite;
      }

      &::before {
        content: '';
        position: absolute;
        top: vw(-5);
        bottom: vw(-5);
        right: vw(-5);
        left: vw(-5);
        background-image: linear-gradient(to right, #03a9f4, #f441a5, #ffeb3b, #09a8f4);
        background-size: 400%;
        // border-radius: 20px;
        z-index: -1;
        filter: blur(15px);
      }
    }
  }


  .bg-day {
    background: $day
  }

  .bg-night {
    background: $night
  }

  .day-and-night-wrapper {
    @include flex;
    justify-content: center;
    width: 100%;
    padding: 0;
    position: relative;
    height: vw(300);
    transition: .5s ease-in all;

    &:has(input:checked) {
      background-color: $night;
    }

    input {
      display: none;

      &:checked+.danLabel {
        border-color: #5d6baa;
        background-color: #6b7abb;

        &::before {
          border-color: #e8e8ea;
          background-color: #fff;
          animation: switch .35s forwards;
        }

        &::after {
          opacity: 1;
          transition-delay: .25s;
        }
      }

      &:checked+.danLabel span {
        width: vw(5);
        left: vw(60);

        &::before {
          width: vw(5);
          height: vw(5);
          top: vw(-25);
        }

        &::after {
          height: vw(5);
          width: vw(5);
          top: vw(20);
          left: vw(-30);
        }
      }
    }

    .danLabel {
      position: relative;
      width: vw(200);
      height: vw(100);
      border: 5px solid #72cce3;
      background-color: #96dcee;
      border-radius: 100px;
      transition: .35s ease-in all;

      &::before {
        cursor: pointer;
        content: '';
        position: absolute;
        width: vw(82);
        height: vw(82);
        border-radius: 50%;
        border: 5px solid #f5eb71;
        background-color: #fffaa8;
        top: 50%;
        transform: translateY(-50%);
        animation: switch-reverse .35s forwards;
      }

      &::after {
        content: '';
        position: absolute;
        border-radius: 50%;
        width: vw(10);
        height: vw(10);
        left: vw(143);
        top: vw(23);
        box-shadow: -13px 0 0 2px #e8e8ea, -24px 14px 0 -2px #e8e8ea;
        transition: all .25s ease-in;
        opacity: 0;
      }

      span {
        display: block;
        position: relative;
        left: vw(135);
        top: vw(45);
        width: vw(10);
        height: vw(5);
        border-radius: vw(5);
        background-color: #fff;
        transition: .25s ease all;

        &::before,
        &::after {
          content: '';
          position: absolute;
          width: vw(40);
          height: vw(5);
          border-radius: vw(5);
          background-color: #fff;
          transition: .25s all ease-in;
        }

        &::before {
          top: vw(-5);
          left: vw(-20);
        }

        &::after {
          top: vw(5);
          left: vw(-10);
        }
      }
    }

    @keyframes switch {
      0% {
        left: 0
      }

      60% {
        left: 0;
        width: vw(112);
      }

      100% {
        left: vw(104);
      }
    }

    @keyframes switch-reverse {
      0% {
        left: vw(104);
      }

      60% {
        left: vw(72);
        width: vw(112);
      }

      100% {
        left: 0
      }
    }
  }

</style>
